<template>
	<div>
		<div>
			<p style="font-size: 24px;margin-left: 130px;">手机</p>
			<div class="goodsOne">
				<div class="imgMar">
					<img src="http://106.15.179.105:3000/public/imgs/phone/phone.png" alt="" height="650px">
				</div>
				<div class="goods">
					<div v-for="item in phoneList" class="goodsTwo">
						<my-list :item="item" ></my-list>
					</div>
					<div class="goodsTwo" style="text-align: center;line-height:345px;">
						<router-link to="">
						    浏览更多
						    <i class="el-icon-d-arrow-right"></i>
						</router-link>
					</div>
				</div>
			</div>
		</div>
		<div >
			<p style="font-size: 24px;margin:0 130px;">
				家电
				<span @mouseover="applianceOver(2)" class="sp" :class="[applianceActive == 2 ? 'spanHover': '']">电视影音</span>
				<span @mouseover="applianceOver(1)" class="sp" :class="[applianceActive == 1 ? 'spanHover': '']">热门</span>
			</p>
			<div class="goodsOne">
				<div class="imgMar">
					<img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png" alt="" class="imgTrans">
					<img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png" alt="" class="imgTrans">
				</div>
				<div class="goods">
					<div v-for="item in applianceHotList" class="goodsTwo">
						<my-list :item="item"></my-list>
					</div>
					<div class="goodsTwo" style="text-align: center;line-height:345px;">
						<router-link to="">
						    浏览更多
						    <i class="el-icon-d-arrow-right"></i>
						</router-link>
					</div>
				</div>
			</div>
		</div>
		<div>
			<p style="font-size: 24px;margin:0 130px;">配件
				<span @mouseover="partsOver(3)" class="sp" :class="[partsActive == 3 ? 'spanHover': '']">充电器</span>
				<span @mouseover="partsOver(2)" class="sp" :class="[partsActive == 2 ? 'spanHover': '']">保护套</span>
				<span @mouseover="partsOver(1)" class="sp" :class="[partsActive == 1 ? 'spanHover': '']">热门</span>
			</p>
			<div class="goodsOne">
				<div class="imgMar">
					<img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png" alt="" class="imgTrans">
					<img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo2.png" alt="" class="imgTrans">
				</div>
				<div class="goods">
					<div v-for="item in partsHotList" class="goodsTwo">
						<my-list :item="item"></my-list>
					</div>
					<div class="goodsTwo" style="text-align: center;line-height:345px;">
						<router-link to="">
						    浏览更多
						    <i class="el-icon-d-arrow-right"></i>
						</router-link>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import indexApi from "@/api/index.js";
	export default {
        created(){
            this.getProduct("phoneList",{"categoryName":"手机"});
            this.getProduct("applianceList",{"categoryName":["电视机","空调","洗衣机"]}, true);
            this.getProduct("TVListData",{"categoryName":"电视机"});
            this.getProduct("partsList", {"categoryName":["保护套", "保护膜", "充电器", "充电宝"]}, true);
            this.getProduct("coverListData",{"categoryName":"保护套"});
            this.getProduct("chargerListData",{"categoryName":"充电器"});
        },
        data(){
            return {

                phoneList: [],//手机数据

                applianceList:[],//家电热门数据
                TVListData: [],//电视数据

                partsList:[],//配件热门数据
                coverListData: [],//保护套数据
                chargerListData: [],//充电器数据


                applianceHotList:null,//家电热门数据
                partsHotList:null,//配件热门数据

                applianceActive: 1,
                partsActive: 1
            }
        },
        methods: {
            //获取轮播图数据
            async getCarousel(){
                let {data: res} = await indexApi.getCarousel();
                this.carousel = res.carousel;
            },
            //获取商品数据
            async getProduct(dataName, data, apiName){
                if(apiName){
                    var {data: res} = await indexApi.getHotProduct(data);
                }else {
                    var {data: res} = await indexApi.getPromoProduct(data);
                }
                this[dataName] = res.Product;
                if(dataName === "applianceList"){//家电热门的时候
                    this.applianceHotList = this.applianceList;
                } 
				if(dataName === "partsList"){
                    this.partsHotList = this.partsList;
                }
            },
            applianceOver(val){
                this.applianceActive = val
			},
			partsOver(val){
				this.partsActive = val
			}
        },
        watch: {
            applianceActive(val){
                this.applianceHotList = val === 1?this.applianceList:this.TVListData;
            },
			partsActive(val){
				if(val === 1){
					this.partsHotList = this.partsList
				}else if(val === 2){
					this.partsHotList = this.coverListData
				}else{
					this.partsHotList = this.chargerListData
				}
			}
        }
    }
	
</script>

<style>
	.sp{
		font-size: 18px;
		float: right;
		margin-left: 20px;
	}
	.spanHover{
		color: #FF6700;
		border-bottom: solid 2px #FF6700;
	}
	.block{
		width: 100%;
		background-color: white;
	}
	.el-carousel{
		width: 83%;
		margin: 0 auto;
	}
	.goodsOne{
		width: 83%;
		margin: 0 auto;
		display: flex;
	}
	.goods{
		width: 2000px;
		margin-left: 20px;
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.goodsTwo{
			margin-bottom: 20px;
		    z-index: 1;
		    float: left;
		    width: 225px;
		    height: 317px;
		    background-color: #fff;
		    -webkit-transition: all .2s linear;
		    transition: all .2s linear;
		    position: relative;
	}
	.goodsTwo:hover{
		transform: translateY(-5px);
		box-shadow:0px 10px 10px #B0B0B0;
	}
	.imgTrans{
		height: 317px;
		margin-bottom: 20px;
	}
	.imgTrans:hover{
		transition: all .2s linear;
		transform: translateY(-5px);
		box-shadow:0px 10px 10px #B0B0B0;
	}
	.imgMar{
		margin-top: 10px;
	}